/**
 * @file
 * @auth jinguangguo
 * @date 2017/1/9
 */

.comp-toast {

    $navHeight: 48px;

    $zIndex_toast: 199;
    $height: 28px;

    position: fixed;
    top: $navHeight;
    left: 0;
    width: 100%;
    height: $height;
    line-height: $height;
    z-index: $zIndex_toast;

    transition: all .4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    transform: translateY(-100%);

    opacity: 0;

    &--top {
        top: 0;
    }

    &--warning {
        background-color: #f9c991;
    }
    &--success {
        background-color: rgba(53, 110, 54, 1);
    }
    &--error {
        background-color: rgba(116, 39, 45, 1);
    }

    .toast-wrapper {
        position: relative;
        width: 1200px;
        margin: 0 auto;
        text-align: center;
        color: #fff;
        font-size: 13px;
        .close {
            position: absolute;
            right: 0;
            top: 6px;
            line-height: 1;
            cursor: pointer;
            .icon-close {
                font-size: 13px;
            }
        }
    }

    &.slide-fade-enter-active {
        display: block;
        transform: translateY(0);
        opacity: 0.98;
    }
}